interface BurgetMenuProps {
  isOpen: boolean
  isFloat: boolean
  onClick: () => void
}

const BurgetMenu: React.FC<BurgetMenuProps> = (props) => {
  const { isOpen, isFloat, onClick } = props
  return (
    <div
      className='flex flex-col justify-center items-end w-5 h-5'
      onClick={onClick}
    >
      <div
        className={`w-5 h-[0.125rem] ${
          isFloat ? 'bg-black' : 'bg-white'
        } rounded-full transition-transform duration-300 ease-in-out ${
          isOpen ? '-rotate-45 translate-y-[0.4375rem]' : ''
        }`}
      />
      <div className='h-[0.3125rem]' />
      <div
        className={`w-5 h-[0.125rem] ${
          isFloat ? 'bg-black' : 'bg-white'
        } rounded-full transition-transform origin-right duration-300 ease-in-out ${
          isOpen ? 'scale-x-0' : 'scale-x-100'
        }`}
      />
      <div className='h-[0.3125rem]' />
      <div
        className={`h-[0.125rem] ${
          isFloat ? 'bg-black' : 'bg-white'
        } rounded-full transition-transform duration-300 ease-in-out ${
          isOpen ? 'w-5 rotate-45 -translate-y-[0.4375rem]' : 'w-3'
        }`}
      />
    </div>
  )
}

export default BurgetMenu
